<template>
    <div class="dashboard-container">
        <!-- github角标 -->
        <github-corner class="github-corner" />

        <el-card shadow="never">
            <el-row justify="space-between">
                <el-col :span="18" :xs="24">
                    <div class="flex h-full items-center">

                        <div>

                            <p class="text-sm text-gray">
                                今日天气晴朗，气温在15℃至25℃之间，东南风。
                            </p>
                        </div>
                    </div>
                </el-col>

                <el-col :span="6" :xs="24">
                    <el-link class="span">消息：10/50</el-link>

                    <el-link class="span" @click="session.set('parentId', 'Top'
                ); router.push('/index/subIndex/myTodo')">待办：{{ todoCount }}/100
                    </el-link>

                    <el-link class="span">项目：10/10</el-link>
                </el-col>
            </el-row>
        </el-card>

        <!-- 数据卡片 -->
        <el-row :gutter="10" class="mt-3">
            <el-col :xs="24" :sm="12" :lg="6">
                <el-card shadow="never">
                    <template #header>
                        <div class="flex items-center justify-between">
                            <span class="text-[var(--el-text-color-secondary)]">访客数</span>
                            <el-tag type="success">日</el-tag>
                        </div>
                    </template>

                    <div class="flex items-center justify-between mt-5">
                        <div class="text-lg text-right">
                            {{ Math.round(visitCountOutput) }}
                        </div>
                        <svg-icon icon-class="visit" size="2em" />
                    </div>

                    <div class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]">
                        <span> 总访客数 </span>
                        <span> {{ Math.round(visitCountOutput * 15) }} </span>
                    </div>
                </el-card>
            </el-col>

            <!--消息数-->
            <el-col :xs="24" :sm="12" :lg="6">
                <el-card shadow="never">
                    <template #header>
                        <div class="flex items-center justify-between">
                            <span class="text-[var(--el-text-color-secondary)]">IP数</span>
                            <el-tag type="success">日</el-tag>
                        </div>
                    </template>

                    <div class="flex items-center justify-between mt-5">
                        <div class="text-lg text-right">
                            {{ Math.round(dauCountOutput) }}
                        </div>
                        <svg-icon icon-class="ip" size="2em" />
                    </div>

                    <div class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]">
                        <span> 总IP数 </span>
                        <span> {{ Math.round(dauCountOutput) }} </span>
                    </div>
                </el-card>
            </el-col>

            <!--销售额-->
            <el-col :xs="24" :sm="12" :lg="6">
                <el-card shadow="never">
                    <template #header>
                        <div class="flex items-center justify-between">
                            <span class="text-[var(--el-text-color-secondary)]">销售额</span>
                            <el-tag>月</el-tag>
                        </div>
                    </template>

                    <div class="flex items-center justify-between mt-5">
                        <div class="text-lg text-right">
                            {{ Math.round(amountOutput) }}
                        </div>
                        <svg-icon icon-class="money" size="2em" />
                    </div>

                    <div class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]">
                        <span> 总销售额 </span>
                        <span> {{ Math.round(amountOutput * 15) }} </span>
                    </div>
                </el-card>
            </el-col>

            <!--订单量-->
            <el-col :xs="24" :sm="12" :lg="6">
                <el-card shadow="never">
                    <template #header>
                        <div class="flex items-center justify-between">
                            <span class="text-[var(--el-text-color-secondary)]">订单量</span>
                            <el-tag type="danger">季</el-tag>
                        </div>
                    </template>

                    <div class="flex items-center justify-between mt-5">
                        <div class="text-lg text-right">
                            {{ Math.round(orderCountOutput) }}
                        </div>
                        <svg-icon icon-class="order" size="2em" />
                    </div>

                    <div class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]">
                        <span> 总订单量 </span>
                        <span> {{ Math.round(orderCountOutput * 15) }} </span>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- Echarts 图表 -->
        <el-row :gutter="10" class="mt-3">
            <el-col :sm="24" :lg="12" class="mb-2">
                <BarChart id="barChart" height="400px" width="100%" class="bg-[var(--el-bg-color-overlay)]" />
            </el-col>

            <el-col :xs="24" :sm="12" :lg="12" class="mb-2">
                <PieChart id="pieChart" height="400px" width="100%" class="bg-[var(--el-bg-color-overlay)]" />
            </el-col>

            <!-- <el-col :xs="24" :sm="12" :lg="8" class="mb-2">
                <RadarChart id="radarChart" height="400px" width="100%" class="bg-[var(--el-bg-color-overlay)]" />
            </el-col> -->
        </el-row>
    </div>
</template>

<script setup lang="ts">
defineOptions({
    name: "Dashboard",
    inheritAttrs: false,
});

import PieChart from "../RBAC/components/PieChart.vue";
import BarChart from "../RBAC/components/BarChart.vue";
import RadarChart from "../RBAC/components/RadarChart.vue"
import GithubCorner from "../RBAC/components/GithubCorner.vue"
//import ElCard from "element-plus/es"
import SvgIcon from "../RBAC/components/SvgIcon.vue"
import { ElCard } from "element-plus/es";
import { ElRow, ElCol, ElStatistic, ElTag } from "element-plus/es";
import router from '@/router';
import { useTransition, TransitionPresets } from "@vueuse/core";
import { computed, ref } from "vue";
import { session } from "@/stores/storageHelper";

//import MyTodoList from "@/views/RBAC/MyTodoList.vue"
import axios from 'axios';
import { baseURL_dev } from '@/config/baseURL'

const baseURL = baseURL_dev
axios.defaults.baseURL = baseURL;



const duration = 5000;

// 销售额
const amount = ref(0);
const amountOutput = useTransition(amount, {
    duration: duration,
    transition: TransitionPresets.easeOutExpo,
});
amount.value = 2000;

// 访客数
const visitCount = ref(0);
const visitCountOutput = useTransition(visitCount, {
    duration: duration,
    transition: TransitionPresets.easeOutExpo,
});
visitCount.value = 2000;

// IP数
const dauCount = ref(0);
const dauCountOutput = useTransition(dauCount, {
    duration: duration,
    transition: TransitionPresets.easeOutExpo,
});
dauCount.value = 2000;

// 订单量
const orderCount = ref(0);
const orderCountOutput = useTransition(orderCount, {
    duration: duration,
    transition: TransitionPresets.easeOutExpo,
});
orderCount.value = 2000;

const todoCount = ref(1)
//待办数
/* const emitsGetTodoCount = (data) => {
    console.log(data);
    todoCount.value = data;
} */



</script>

<style lang="scss" scoped>
.el-card {
    margin-bottom: 15px;
}

.dashboard-container {
    position: relative;
    padding: 24px;

    .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .github-corner {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        border: 0;
    }

    .data-box {
        display: flex;
        justify-content: space-between;
        padding: 20px;
        font-weight: bold;
        color: var(--el-text-color-regular);
        background: var(--el-bg-color-overlay);
        border-color: var(--el-border-color);
        box-shadow: var(--el-box-shadow-dark);
    }

    .svg-icon {
        fill: currentcolor !important;
    }

    .span {
        margin-right: 20px;
    }
}
</style>
